<template>
	<div @click.stop="onClickHandler()" :style="componentModel.cssStyle"
		:class="[selected ?'row-selected-state '+componentModel.cssClass : 'row-normal-state '+componentModel.cssClass]" style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<el-tree :data="data" :props="defaultProps" node-key="id" ref="treeComponent" :draggable="true"
			:show-checkbox="componentModel.checked"></el-tree>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignTreeComponent",
		props: ["componentModel"],
		data() {
			return {
				data: [{
					"id": 1,
					"name": "根节点",
					children: [{
							"id": 2,
							"name": "节点1"
						},
						{
							"id": 3,
							"name": "节点2"
						}
					],
				}],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				selected: false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					},{
						"key": "checked","label":"多选","editor":"checkbox"
					},
					{
						"key": "varName","label":"变量名","editor":"text"
					},
					{
						"key": "onItemClickExpression",
						"label": "节点单击事件",
						"editor": "textarea"
					},
				]
			};
		},
		mounted() {
			if (this.componentModel.checked == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"checked",false);
			}
			this.children.push(this);
		},inject:['children'],
		beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.componentClickHandler(this);
			},
			setSelected(selected) {
				this.selected = selected;
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="checked"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"checked");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				if(propertyKey=="checked"){
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"checked",propertyValue);
				}
			}
		}
	};
</script>

<style>
</style>
